<template>
  <div class="container">
    <el-row type="flex" justify="space-between">
      <el-col :span="20">
        <el-form :model="page" :inline="true" label-width="80px" class="demo-ruleForm" size="mini">
          <el-form-item label="关键字">
            <el-input v-model="page.keyword" placeholder="请选择"></el-input>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="page.state" placeholder="请选择">
              <el-option label="开启" value="1"></el-option>
              <el-option label="屏蔽" value="0"></el-option>
            </el-select>
            <el-button size="mini" style="margin-left: 10px" @click="clearbtn"> 清除 </el-button>
            <el-button type="primary" size="mini" @click="searchbtn">搜索</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="4" :push="2">
        <el-button type="success" icon="el-icon-edit" size="mini" @click="addarticle">新增技巧</el-button>
      </el-col>
    </el-row>
    <el-row type="flex" justify="center">
      <el-col>
        <el-alert type="info"><i class="el-icon-info" style="margin: 0 5px"></i>数据一共 {{ total }} 条 </el-alert>
      </el-col>
    </el-row>
    <el-table :data="tableData" style="width: 100%; margin-top: 20px">
      <el-table-column fixed prop="date" label="序号" type="index" width="100px"> </el-table-column>
      <el-table-column label="文章标题" width="400px">
        <template slot-scope="scope">
          <span
            >{{ scope.row.title }} <i class="el-icon-video-play video" v-if="scope.row.videoURL" @click="videoplay(scope.row.videoURL)"></i
          ></span>
        </template>
      </el-table-column>
      <el-table-column prop="visits" label="阅读数"> </el-table-column>
      <el-table-column prop="username" label="录入人"> </el-table-column>
      <el-table-column label="录入时间">
        <template slot-scope="scope">
          <!-- vue实例外创建 -->
          <span>{{ scope.row.createTime | parseTimeByString }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <!-- vue实例外创建 -->
          <span>{{ scope.row.state === 1 ? '已启用' : '已禁用' }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" size="small" @click="preview(scope.row)">预览</el-button>
          <el-button type="text" size="small" @click="state(scope.row.id, scope.row.state)">{{
            scope.row.state === 0 ? '启用' : '禁用'
          }}</el-button>
          <el-button type="text" size="small" :disabled="scope.row.state === 0" @click="changearticle(scope.row)">修改</el-button>
          <el-button type="text" size="small" :disabled="scope.row.state === 0" @click="delbtn(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-row type="flex" justify="end" style="margin-top: 20px">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="page.pagesize"
        layout="prev, pager, next, sizes,  jumper"
        :total="total"
      >
      </el-pagination>
    </el-row>
    <!-- 文章预览组件 -->
    <pre-view :dialogVisible.sync="viewisshow" :info="viewinfo" />
    <add-dia :dialogVisible.sync="addisshow" :title="title" :info="changeinfo"/>
    <Video :dialogVisible.sync="videoisshow" :src="videourl" />
  </div>
</template>

<script>
// 引入article接口
import { list, changeState, remove } from '@/api/hmmm/articles'
// 引入预览组件
import preView from '@/module-hmmm/components/articles-preview'
// 引入新增修改组件
import addDia from '@/module-hmmm/components/articles-add'
// 引入视频播放组件
import Video from '@/module-hmmm/components/articles-video'
export default {
  components: {
    preView,
    addDia,
    Video
  },
  data () {
    return {
      // 页面请求信息
      page: {
        page: 1,
        pagesize: 10,
        keyword: '',
        state: null
      },
      tableData: [],
      total: 0,
      nowpagetotal: 0,
      viewisshow: false,
      viewinfo: {},
      addisshow: false,
      changeinfo: {},
      title: '',
      videoisshow: false,
      videourl: ''
    }
  },
  // 页面点击发起数据请求
  created () {
    this.geiinfo()
  },
  methods: {
    // 开局发起请求函数
    async geiinfo () {
      const { data: res } = await list(this.page)
      this.tableData = res.items
      this.total = res.counts
      this.nowpagetotal = res.items.length
    },
    // 点击每页条数
    handleSizeChange (pagesize) {
      this.page.pagesize = pagesize
      this.geiinfo()
    },
    // 切换页码
    handleCurrentChange (page) {
      this.page.page = page
      this.geiinfo()
    },
    // 点击播放按钮
    videoplay (url) {
      this.videoisshow = true
      this.videourl = url
    },
    // 点击清除
    clearbtn () {
      if (this.page.keyword === '' && !this.page.state) return
      this.page.keyword = ''
      this.page.state = null
      this.geiinfo()
    },
    // 点击搜索
    searchbtn () {
      this.page.page = 1
      this.geiinfo()
    },
    // 点击预览
    preview (info) {
      this.viewisshow = true
      this.viewinfo = info
    },
    // 更改状态
    state (id, st) {
      switch (st) {
        case 1:
          changeState({ id, state: 0 })
          break
        case 0:
          changeState({ id, state: 1 })
          break
      }
      this.geiinfo()
    },
    // 删除按钮
    delbtn (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          const res = await remove(row)
          if (res.status !== 200) {
            this.$message({
              type: 'error',
              message: '删除失败,请稍后尝试!'
            })
            return
          } else {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
          }
          // 判断是否为当前最后一条且页数不等于一
          if (this.nowpagetotal === 1 && this.page.page > 1) {
            this.page.page--
          }
          this.geiinfo()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 新增文章
    addarticle () {
      this.addisshow = true
      this.title = '新增文章'
    },
    // 修改文章
    changearticle (info) {
      this.changeinfo = info
      this.addisshow = true
      this.title = '修改文章'
    }
  }
}
</script>

<style scoped lang="less">
.container {
  margin: 20px;
  background-color: #fff;
  padding: 20px;
  margin-bottom: 20px;
  .video {
    color: rgb(13, 168, 250);
  }
  .el-select .el-input {
    width: 100px;
  }
  ::v-deep .el-table th.el-table__cell.is-leaf {
    border-bottom: 2px solid #c9c9c9;
    background-color: rgb(246, 246, 246);
  }
}
</style>
